<template>
	<view>
		<!-- 导航栏 -->
		<u-navbar :is-back="false" title="　" :border-bottom="false">
			<view class="u-flex u-row-right" style="width: 100%;">
				<view class="camera u-flex u-row-center">
					<u-icon name="scan" color="#969799" size="28"></u-icon>
				</view>
			</view>
		</u-navbar>

		<view class="userInfoUnlog" v-if="!isLogged" @click="logClick">
			<u-avatar :src="picUnlog" size="140"></u-avatar>
			<view class="hintSlot">
				账号登录
			</view>
			<view class="userArrrow">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>

		<view class="userInfoBox" v-else>
			<view class="userInfoTop">
				<view class="userAvatar">
					<u-avatar :src="this.$store.state.userInfo.avatar" size="140"></u-avatar>
					<!-- <u-avatar :src="picSrc" size="140"></u-avatar> -->
				</view>
				<view class="userInfoTopMiddle" @click="toInfoPage">
					<view class="userName">{{this.$store.state.userInfo.nickName}}</view>
					<view class="userId">账号：{{this.$store.state.userInfo.studentNo}}</view>
				</view>
				<view class="userArrrow" @click="toInfoPage">
					<view class="">
						<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="userInfoButtom">
				<view class="buttomItem">
					<view class="itemTitle">
						班级
					</view>
					<view class="itemContents">
						{{this.$store.state.userInfo.clazzName}}
					</view>
				</view>
				<view class="buttomItem">
					<view class="itemTitle">
						真实姓名
					</view>
					<view class="itemContents">
						{{this.$store.state.userInfo.realName}}
					</view>
				</view>
				<view class="buttomItem">
					<view class="itemTitle">
						身份
					</view>
					<view class="itemContents">
						{{this.$store.state.userInfo.roleName}}
					</view>
				</view>
			</view>
		</view>

		<!-- 条项区 -->
		<view class="u-m-t-20">
			<u-cell-group>
				<!-- <u-cell-item icon="star" title="收藏"></u-cell-item> -->
				<u-cell-item icon="chat" title="我的消息" @click="toNoticePage"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<!-- <u-cell-item icon="coupon" title="意见反馈"></u-cell-item> -->
				<!-- <u-cell-item icon="heart" title="关注"></u-cell-item> -->
				<u-cell-item icon="question-circle" title="关于我们" @click="aboutUs"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="setting" title="修改密码" @click="changePwd"></u-cell-item>
				<u-cell-item icon="close" title="退出登录" @click="logOut"></u-cell-item>
			</u-cell-group>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picUnlog: 'https://i.loli.net/2021/03/05/EN5gevsHuhjn7YI.png',
				show: true,
				userInfo: this.$store.state.userInfo,
				// isLogged:false
			}
		},
		computed: {
			isLogged: function() {
				// 	var that = this
				return this.$store.state.hasLogin
			},
		},
		methods: {
			logClick() {
				this.$u.route('pages/login/login');
			},
			logOut() {
				// this.isLogged=false
				this.$store.state.hasLogin = false
				this.$store.state.userInfo = {}
				this.userInfo = {}
				// sessionStorage.clear(); // 删除所有数据
				uni.removeStorage({
					key: 'token',
					success: function(res) {
						console.log('清除state成功');
					}
				});
				uni.showToast({
					title: '已成功退出登录！',
					icon: 'none'
				});
				console.log(this.isLogged);
			},
			toNoticePage() {
				this.$u.route('pages/mine/myNotice');
			},
			aboutUs() {
				this.$u.route('pages/mine/aboutUs');
				console.log(uni.getStorageSync('userInfo'));
			},
			changePwd() {
				this.$u.route('pages/login/changePass');
			},
			toInfoPage() {
				this.$u.route('pages/mine/userInfo');
			}
		},
		onLoad() {
			// var that = this

			// this.$api.getStuInfo()
			// 	.then(res => {
			// 		console.log('userInfo', res)
			// 		that.$store.commit('setUserInfo', res.values)
			// 		that.userInfo = res.values
			// 		console.log('info:', that.$store.state.userInfo)
			// 	})
			// this.$forceUpdate()
		},
		// onShow() {
		// 	uni.navigateBack()
			
		// }
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f8;
	}

	.userInfoUnlog {
		background-color: #FFFFFF;
		height: 180rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.hintSlot {
			font-size: 45rpx;
		}

		.userArrrow {
			margin-left: 200rpx;
		}
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.userInfoBox {
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.userInfoTop {
			// padding: 0 30upx;
			display: flex;
			justify-content: center;

			.userInfoTopMiddle {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin: 10rpx 30rpx;

				.userName {
					font-size: 36rpx;
					font-weight: bold;
				}

				.userId {
					font-size: 28rpx;
					color: $font-color-ps;
				}
			}

			.userArrrow {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 180rpx;
			}
		}

		.userInfoButtom {
			display: flex;
			justify-content: space-between;
			padding: 30upx 0;

			// border-top: solid #EEEEEE 2rpx;
			.buttomItem {
				width: 250rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.itemTitle {
					color: $font-color-ps;
					font-size: 26rpx;
				}

				.itemContent {
					font-size: 30rpx;
				}
			}

		}
	}
</style>
